このトピックは、以下のセクションで構成されます。
Ignite UI for jQuery＆trade; はきれいでモダンな Web アプリケーションを作成するための高度な HTML5 + ツールセットです。jQuery および jQuery UI をベースとしたチャート、データ視覚化マップ、(階層編集可能な) グリッド、ピボット グリッド、エンハンスト エディター (コンボボックス、マスクエ ディター、HTML エディター、日付ピッカー、など)、柔軟なデータソース コネクタなど、機能豊かで高性能な UI コントロールおよびウィジェットを提供します。
Ignite UI for jQuery は 2 つのバージョンで提供します。
Ignite UI for jQuery をプロジェクトにホストするために複数のオプションがあります。
Ignite UI CLI は、Angular、React、および jQuery でアプリケーションを初期化、開発、スキャフォールディング、および処理するツールです。 CLI を使用するには、npm パッケージをグローバル モジュールとしてインストールします。
npm install -g igniteui-cli
詳細については、「Ignite UI CLI の使用」の使用トピックを参照してください。
Ignite UI for jQuery コントロール ファミリの主な配布方法は、NPM、JSPM、NuGet などのパッケージ マネージャーを使用することです。
NPM (Ignite UI for jQuery オープン ソースをインストールします)
npm install ignite-ui
完全ライセンス版を構成する方法については、Ignite UI for jQuery npm パッケージの使用トピックを参照してください。
NuGet (Ignite UI for jQuery トライアル版 をインストールします)
Install-Package IgniteUI
ライセンス版を構成する方法については、Ignite UI for jQuery NuGet パッケージの使用トピックを参照してください。
JSPM (Ignite UI for jQuery オープン ソースをインストールします)
jspm install npm:ignite-ui
完全ライセンス版を構成する方法については、Ignite UI for jQuery コントロールで System.JS を使用トピックを参照してください。
Ignite UI for jQuery が jQuery および jQuery UI ライブラリに依存するため、Ignite UI for jQuery スクリプトの前にそれへの参照を追加する必要があります。また、Ignite UI for jQuery コントロールをページに追加するために複数のオプションがあります。
infragistics.core.js (必須)、グリッドなどの Line of Business コントロールが含まれる infragistics.lob.js、チャートなどの Data Visualization コントロールが含まれる infragistics.dv.js、すべての Excel エクスポートに関連するロジックを含む infragistics.excel-bundled.js、スプレッドシート ユーザー インターフェイスの実装を含む infragistics.spreadsheet-bundled.js、およびすべてのスケジューラに関連するロジックを含む infragistics.scheduler-bundled.js があります。詳細については、必要なリソースの手動で追加するトピックを参照してください。次のコードは、Ignite UI for jQuery の使用を開始するために必要な参照 (CDN リンク) を含むボイラープレート HTML ページのサンプルを表しています。
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet" />
<style>
/* ----- CSS Goes Here ----- */
</style>
</head>
<body>
<!-- ----- HTML Goes Here ----- -->
<table id="grid"></table>
<!-- JavaScript Library Dependencies -->
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script>
$(function () {
// ----- JavaScript Goes Here ----- //
});
</script>
</body>
</html>
直接、またはページ デザイナーを使用する、という 2 つのオプションがあります。
Ignite UI for jQuery ページ デザイナーは、マウスのみの使用で Ignite UI for jQuery コントロールを構成する完全なデザイナー エクスペリエンスを提供します。
ツールボックス (右側) からページ デザイン エリア (左) に igGrid を追加するために、[リストおよびピッカー] セクションから Grid コントロールをドラッグアンドドロップします。それから、プロパティ エディターを使用してグリッドを構成します。構成後、生成されたページをコピーします。
Ignite UI for jQuery のカスタム ダウンロード ページ には、プロジェクトで使用する Ignite UI for jQuery コントロールと機能のみを選択し、最大のページ読み込みパフォーマンスのための、最適化された JavaScript ファイルおよび CSS ファイルをダウンロードするオプションがあります。
プロジェクトに Ignite UI for jQuery スクリプト ファイルをホストする代わりに、Ignite UI for jQuery CDN リンクを使用できます。インターネット アプリケーションの場合、通常 CDN は、社内でホストするよりすばやくエンド ユーザーにファイルを提供できます。
以下に、Ignite UI for jQuery トライアル版のリンクをリストします。詳細については、Ignite UI for jQuery 対応 Infragistics コンテンツ配信ネットワーク (CDN) トピックを参照してください。
<!-- Ignite UI for jQuery Required Combined CSS Files (Trial) -->
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet" />
<!-- JavaScript Library Dependencies -->
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files (Trial) -->
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
Ignite UI for jQuery® は、強い型付け、コンパイル時間のチェック、intellisense 機能を利用できるようにTypeScript の型定義を提供します。詳細については、 TypeScript での Ignite UI for jQuery の使用トピックを参照してください。
Ignite UI for jQuery AngularJS 拡張子は、AngularJS アプリケーションで使用されるコントロールの両方向のデータ バインディングおよび宣言的初期化を提供します。詳細については、 AngularJS での Ignite UI for jQuery の使用トピックを参照してください。
Ignite UI for jQuery Angular 拡張子は、Angular アプリケーションで使用されるコントロールの両方向のデータ バインディング、宣言的初期化、ネイティブ API を提供します。詳細については、GitHub で Ignite UI for jQuery Angular 拡張子 (英語) を参照してください。
Ignite UI for jQuery ReactJS 拡張子は、JSX マークアップおよび React API の初期化を提供しします。詳細については、GitHub で Ignite UI for jQuery React 拡張子 (英語) を参照してください。
Ignite UI for MVC ラッパーは、モデルおよびビューチャートの初期化およびサーバー側リモート要求の処理をサポートします。詳細については、「コントロールを MVC プロジェクトに追加」トピックを参照してください。
オンラインで表示: GitHub